import React, { useState } from "react";
import { Cell, NavBar, Tag, Button } from "react-vant";
import { Edit } from "@react-vant/icons";

import { useNavigate } from "react-router-dom";

// import "./Ship_address.css";

function Ship_address() {
  const navigate = useNavigate();

  const [adddress, setAddress] = useState([
    {
      _id: "1",
      adddress: "北京市海淀区上地十街10号",
      type: "家",
      name: "张三",
      phone: "13800138000",
    },
    {
      _id: "2",
      name: "赵小姐",
      adddress: "北京市海淀区上地十街10号",
      type: "公司",
      phone: "13800138000",
    },
    {
      _id: "3",
      name: "赵小姐",
      adddress: "北京市海淀区上地十街10号",
      type: "家",
      phone: "13800138000",
    },
    {
      _id: "4",
      adddress: "北京市海淀区上地十街10号",
      type: "学校",
      name: "赵小姐",
      phone: "13800138000",
    },
  ]);

  return (
    <>
      <NavBar title="收货地址管理" onClickLeft={() => navigate(-1)} />
      <main style={{ marginTop: 20, height: "80vh" }}>
        {adddress.map((item, index) => (
          <Cell
            center
            key={index}
            title={
              <div>
                {/* 当type为公司时为橙色，为家时为浅绿色，为学校时为蓝色，默字体都为白色 */}
                {item.type === "公司" ? (
                  <Tag color="#FF5435" style={{ marginRight: 5 }}>
                    公司
                  </Tag>
                ) : item.type === "家" ? (
                  <Tag
                    color="#008B8B"
                    style={{
                      width: 23,
                      marginRight: 5,
                      justifyContent: "center",
                      alignItems: "center",
                    }}
                  >
                    家
                  </Tag>
                ) : item.type === "学校" ? (
                  <Tag color="#0000FF" style={{ marginRight: 5 }}>
                    学校
                  </Tag>
                ) : null}
                {item.adddress}
              </div>
            }
            label={
              <div>
                <span>{item.name}</span>
                <span style={{ marginLeft: 10 }}>+86{item.phone}</span>
              </div>
            }
            // icon={<Image width={44} height={44} src="/demo_1.jpg" round />}
            rightIcon={<Edit />}
          ></Cell>
        ))}
      </main>
      {/* 背景颜色为从左到右的渐变色有浅到深的橙色，字体颜色为白色 */}
      <Button
        type="primary"
        round
        style={{
          marginTop: 20,
          width: "70%",
          background: "linear-gradient(to right, #FF8C00 ,#FF5435)",
          border: "none",
          boxShadow: "none",
          // 定位到底部中间
          position: "fixed",
          bottom: 40,
          left: "50%",
          transform: "translateX(-50%)",
        }}
        onClick={() => navigate("/outlet/addA")}
      >
        <span style={{ fontSize: 20, color: "#fff" }}>+</span> 新增地址
      </Button>
    </>
  );
}
export default Ship_address;
